<template>
    <div class="login">
        <div class="menu" :class="isRotate ? 'active' : ''">
            <el-icon class="toggle" @click.stop="handleClick">
                <Plus />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 0,'--color': '#ff2972' }">
                <Files />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 1,'--color': '#fee800' }">
                <Collection />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 2,'--color': '#04fc43' }">
                <School />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 3,'--color': '#fe00f1' }">
                <Burger />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 4,'--color': '#00b0fe' }">
                <Tickets />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 5,'--color': '#fea600' }">
                <Monitor />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 6,'--color': '#a529ff' }">
                <Sell />
            </el-icon>
            <el-icon class="btn" :style="{ '--i': 7,'--color': '#01bdab' }">
                <Lock />
            </el-icon>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isRotate: false,
        };
    },
    mounted() {},
    methods: {
        handleClick() {
            this.isRotate = !this.isRotate;
        },
    },
};
</script>

<style scoped>
.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    background: #2f363e;
}

::v-deep .el-icon {
    font-size: 30px !important;
    color: #fff;
}

.menu {
    position: relative;
    width: 420px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .btn {
    position: absolute;
    left: 0;
    transition: 0.5s;
    transform-origin: 210px;
    transform: rotate(0deg) translateX(180px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.menu .toggle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #2f363e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: transform 1.25s;
}
.el-button:focus,
.el-button:hover {
    border: 2px solid #fff !important;
    background: #2f363e !important;
}

.menu.active .toggle {
    transform: rotate(315deg);
}

.menu.active .btn {
    transform: rotate(calc(360deg / 8 * var(--i))) translateX(0);
    border: 2px solid var(--color);
    color: var(--color);
}

.menu.active .btn:hover {
    transition: 0s;
    color: #333;
    background: var(--color);
    box-shadow: 0 0 10px var(--color), 0 0 30px var(--color), 0 0 50px var(--color);
}
</style>
